<template>
  <!-- li-etd:为可编辑单元格 -->
  <td :rowspan="rowspan" :colspan="colspan" :height="height+'px'" @dblclick="editTd(canEdit)">
    <input
      class="canEdit"
      type="text"
      :value="data"
      @input="changVal($event)"
      @blur="editTdBlur"
      :disabled="isDisabled"
      v-myfocus="isFocus"
      ref="etdinput"
    />
    <slot></slot>
  </td>
</template>

<script>
export default {
  /* 
    参数说明：
        data：单元格里面的值，
        colspan：需要横向合并几列，默认值为1
        rowspan：需要纵向合并几行，默认值为1
        canEdit：该单元格是否可双击编辑，默认值为false
        height:定义单元格的高度，默认值为20px
  */
  props: {
    data: { required: false },
    colspan: { type: Number, default: 1 },
    rowspan: { type: Number, default: 1 },
    canEdit: { type: Boolean, default: false },
    height: { type: Number, default: 20 },
  },
  data() {
    return {
      // 值单元格默认不能编辑
      isDisabled: true,
      // 值单元格默认没有得到焦点
      isFocus: false,
    };
  },
  methods: {
    // 双击值单元格开启编辑功能
    editTd(canEdit) {
      if (canEdit) {
        this.isDisabled = false;
        this.isFocus = true;
      }
    },
    // 值单元格失去焦点事件
    editTdBlur() {
      this.isDisabled = true;
    },
    //  编辑单元格里面的值，更改props
    changVal(e) {
      this.$emit("update:data", e.target.value);
    },
  },
  directives: {
    // 自定义指令：聚焦
    myfocus: {
      update(el, binding) {
        binding.value && el.focus();
      },
    },
  },
};
</script>

<style lang="css" scoped>
/* 值单元格样式 */
.canEdit {
  border: none;
  outline: none;
  width: 90%;
  word-wrap: break-word;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  text-align: center;
}
/* 值单元格获取焦点样式 */
.canEdit:focus {
  outline: 1px solid rgb(57, 145, 247);
}
</style>